<template>
  <div class="horizontal-goods-item circle-bg">
    <div class="order-goods-item">
      <van-image lazy-load :src="detail.pic" @click="$router.push({path: '/goodsDetail', query: {id: detail.id}})">
        <template v-slot:error>加载失败</template>
      </van-image>
      <div class="goods">
        <span class="title van-multi-ellipsis--l2" @click="$router.push({path: '/goodsDetail', query: {id: detail.id}})">
          {{detail.name}}
        </span>
        <span class="num"></span>
        <span class="price">
          <span class="money">¥{{detail.price | fentoyuan}}</span>
          <div class="sale" @click="addCart">
            <!-- <span>销量{{detail.saleCount || 0}}</span> -->
            <van-image src="imgs/cart.png"/>
          </div>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

import userApi from '@/api/userApi'
import config from '@/config/config'
import constants from '@/config/constants'

export default {
  name: 'horizontalGoodsItem',
  props: ['detail'],
  data () {
    return {

    }
  },
  computed: {
    ...mapState(['user','cartList'])
  },
  methods: {
    /* 添加购物车 */
    async addCart () {
      if(this.user){
        const result = await userApi.addCart({
          goodsId: this.detail.id,
          goodsNum: 1,
          memberId: this.user.id
        });
        if(result.code == constants.SUCCESS){
          this.$store.commit(constants.STORE.UPDATE_CART_LIST);
          this.$toast.success('添加成功');
        }
      }else{
        this.$dialog.confirm({
          title: '',
          message: '还未登录，去登录?'
        })
        .then(() => {
          this.$router.push('/login');
        })
      }
    }
  }
}
</script>

<style lang="scss">
.horizontal-goods-item{
  background: #fff;
  .order-goods-item{
    .van-image{
      height: 80px !important;
      width: 80px !important;
    }
    .goods{
      .title{
        font-size: 14px;
      }
      .num{
        margin-bottom: 5px;
      }
      .price{
        .money{
          width: 70px;
          font-size: 14px;
          margin-right: 10px;
        }
        .sale{
          display: flex;
          justify-content: center;
          span{
            margin-right: 10px;
          }
        }
        .van-image{
          margin-right: 3px;
          width: 20px !important;
          height: 20px !important;
          img{
            width: 16px;
            height: 16px;
          }
        }
      }
    }
  }
}
</style>
